<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>主题风格</span>
      </div>
    </template>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="电脑端" name="first">
        <button
          class="btn"
          :class="{ active: num == '1' }"
          pain
          @click="num = '1'"
        >
          主题颜色
        </button>
        <button
          class="btn"
          :class="{ active: num == '2' }"
          pain
          @click="num = '2'"
        >
          首页风格
        </button>

        <div v-if="num == 1" class="imgs1">
          <div
            class="imgBox"
            :class="{ checkImg: imgNum == '1' }"
            @click="imgNum = '1'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/%E6%9C%BA%E6%9E%84%E7%89%88%E9%A6%96%E9%A1%B5-v3%E7%BB%BF%E8%89%B2.jpg"
              alt=""
            />
            <div>青竹绿</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum == '2' }"
            @click="imgNum = '2'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/%E6%9C%BA%E6%9E%84%E7%89%88%E9%A6%96%E9%A1%B5-v3%E8%93%9D%E8%89%B2.jpg"
              alt=""
            />
            <div>天青蓝</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum == '3' }"
            @click="imgNum = '3'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/%E6%9C%BA%E6%9E%84%E7%89%88%E9%A6%96%E9%A1%B5-v3%E9%9D%92%E8%89%B2.jpg"
              alt=""
            />
            <div>翡翠青</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum == '4' }"
            @click="imgNum = '4'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/%E6%9C%BA%E6%9E%84%E7%89%88%E9%A6%96%E9%A1%B5-v3%E7%81%B0%E8%89%B2.jpg"
              alt=""
            />
            <div>薄墨灰</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum == '5' }"
            @click="imgNum = '5'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/%E6%9C%BA%E6%9E%84%E7%89%88%E9%A6%96%E9%A1%B5-v3%E7%BA%A2%E8%89%B2.jpg"
              alt=""
            />
            <div>中国红</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum == '6' }"
            @click="imgNum = '6'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/%E6%9C%BA%E6%9E%84%E7%89%88%E9%A6%96%E9%A1%B5-v3%E9%BB%84%E8%89%B2.jpg"
              alt=""
            />
            <div>柑橘橙</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum == '7' }"
            @click="imgNum = '7'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/%E6%9C%BA%E6%9E%84%E7%89%88%E9%A6%96%E9%A1%B5-v3%E7%B4%AB%E8%89%B2.jpg"
              alt=""
            />
            <div>青莲紫</div>
          </div>
        </div>

        <div v-else class="imgs1">
          <div
            class="imgBox"
            :class="{ checkImg: imgNum2 == '1' }"
            @click="imgNum2 = '1'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/homepage/1.jpg"
              alt=""
            />
            <div>风格1</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum2 == '2' }"
            @click="imgNum2 = '2'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/homepage/2.jpg"
              alt=""
            />
            <div>风格2</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum2 == '3' }"
            @click="imgNum2 = '3'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/homepage/3.jpg"
              alt=""
            />
            <div>风格3</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum2 == '4' }"
            @click="imgNum2 = '4'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/homepage/4.jpg"
              alt=""
            />
            <div>风格4</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum2 == '5' }"
            @click="imgNum2 = '5'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/homepage/5.jpg"
              alt=""
            />
            <div>风格5</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum2 == '6' }"
            @click="imgNum2 = '6'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/homepage/6.jpg"
              alt=""
            />
            <div>风格6</div>
          </div>
          <div
            class="imgBox"
            :class="{ checkImg: imgNum2 == '7' }"
            @click="imgNum2 = '7'"
          >
            <img
              style="width: 240px; height: 620px"
              src="https://staticv3.youzy.cn/tob.storeadmin/img/theme/homepage/7.jpg"
              alt=""
            />
            <div>风格7</div>
          </div>
        </div>
        <div style="text-align: center">
          <el-button
            type="primary"
            style="width: 170px; height: 40px; margin-top: 20px"
            >保存</el-button
          >
        </div>
      </el-tab-pane>
      <el-tab-pane label="H5/小程序" name="second">
        <div class="item">
          <div class="label">选择颜色:</div>
          <div class="value">
            <div
              class="blue block"
              :class="{ checkColor: colorNum == '1' }"
              @click="colorNum = '1'"
            ></div>
            <div
              class="blue2 block"
              :class="{ checkColor: colorNum == '2' }"
              @click="colorNum = '2'"
            ></div>
            <div
              class="green block"
              :class="{ checkColor: colorNum == '3' }"
              @click="colorNum = '3'"
            ></div>
            <div
              class="green2 block"
              :class="{ checkColor: colorNum == '4' }"
              @click="colorNum = '4'"
            ></div>
            <div
              class="purple block"
              :class="{ checkColor: colorNum == '5' }"
              @click="colorNum = '5'"
            ></div>
            <div
              class="red block"
              :class="{ checkColor: colorNum == '6' }"
              @click="colorNum = '6'"
            ></div>
            <div
              class="orange block"
              :class="{ checkColor: colorNum == '7' }"
              @click="colorNum = '7'"
            ></div>
          </div>
        </div>

        <div class="imgs3" v-if="colorNum == '1'">
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/shouye1.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/fuwu1.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/wode1.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/zixun1.png"
            alt=""
          />
        </div>
        <div class="imgs3" v-else-if="colorNum == '2'">
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/shouye2.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/fuwu2.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/wode2.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/zixun2.png"
            alt=""
          />
        </div>

        <div class="imgs3" v-else-if="colorNum == '3'">
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/shouye3.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/fuwu3.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/wode3.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/zixun3.png"
            alt=""
          />
        </div>

        <div class="imgs3" v-else-if="colorNum == '4'">
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/shouye4.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/fuwu4.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/wode4.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/zixun4.png"
            alt=""
          />
        </div>
        <div class="imgs3" v-else-if="colorNum == '5'">
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/shouye5.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/fuwu5.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/wode5.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/zixun5.png"
            alt=""
          />
        </div>
        <div class="imgs3" v-else-if="colorNum == '6'">
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/shouye6.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/fuwu6.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/wode6.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/zixun6.png"
            alt=""
          />
        </div>
        <div class="imgs3" v-else-if="colorNum == '7'">
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/shouye7.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/fuwu7.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/wode7.png"
            alt=""
          />
          <img
            style="width: 300px; height: 600px"
            src="https://b.gaokaow.cc/zixun7.png"
            alt=""
          />
        </div>
        <div style="text-align: center">
          <el-button
            type="primary"
            style="width: 170px; height: 40px; margin-top: 20px"
            >保存</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup>
import { ref } from 'vue';
const activeName = ref('first');
const num = ref('1');
const imgNum = ref('1');
const imgNum2 = ref('1');
const colorNum = ref('1');
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.btn {
  width: 80px;
  height: 32px;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  margin-right: 20px;
  cursor: pointer;
}

.active {
  background-color: $blue;
  border-color: $blue;
  color: #fff;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

:deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

.imgs1 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 20px;

  img {
    margin: 20px;
    cursor: pointer;
  }

  .imgBox {
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .checkImg::before {
    content: '√';
    background-color: blue;
    color: #fff;
    font-weight: bold;
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
  }

  .checkImg::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  &::after {
    content: '';
    flex: 1;
  }
}

.item {
  display: flex;
  align-items: center;

  .value {
    display: flex;
    align-items: center;

    .block {
      width: 32px;
      height: 32px;
      margin: 0 10px;
      border-radius: 5px;
      cursor: pointer;
      position: relative;
    }

    .checkColor::after {
      content: '√';
      font-size: 12px;
      text-indent: 2px;
      width: 16px;
      height: 16px;
      border: 1px solid #fff;
      border-radius: 50%;
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    .blue {
      background-color: #155bd4;
    }

    .blue2 {
      background-color: #1ea5fa;
    }

    .green {
      background-color: #19b955;
    }

    .green2 {
      background-color: #00b1a1;
    }

    .purple {
      background-color: #5c307d;
    }

    .red {
      background-color: #e31616;
    }

    .orange {
      background-color: #ff7e1c;
    }
  }
}
</style>
